<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right" :style="style">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">病人状态</span>
            <el-select
              v-model="queryInfo.patientStatus"
              filterable
              clearable
              placeholder="请选择"
              class="c_select"
            >
              <el-option
                v-for="item in patientStatus"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </div>
          <div class="fl">
            <span class="c_tip">床号</span>
            <el-input v-model="queryInfo.Bedno" clearable type="text" placeholder="床号" />
          </div>
          <div class="fl">
            <span class="c_tip">姓名</span>
            <el-input v-model="queryInfo.Patient_name" clearable type="text" placeholder="姓名" />
          </div>
          <div class="fl">
            <span class="c_tip">病人类型</span>
            <el-select
              v-model="queryInfo.PatientType"
              filterable
              clearable
              placeholder="请选择"
              class="c_select"
            >
              <el-option
                v-for="item in PatientTypeList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </div>
          <div class="fl">
            <span class="c_tip">科室</span>
            <el-input v-model="queryInfo.deptname" readonly="readonly" clearable class="c_search" type="text" placeholder="科室" />
            <i class="c_searchbtn" @click="selectPop('科室')">选择</i>
          </div>
          <div class="fl">
            <span class="c_tip">主管医生</span>
            <el-input v-model="queryInfo.doctorname" readonly="readonly" clearable class="c_search" type="text" placeholder="主管医生" />
            <i class="c_searchbtn" @click="selectPop('主管医生')">选择</i>
          </div>
          <div class="fl">
            <span class="c_tip">药疗医嘱</span>
            <el-input v-model="queryInfo.drugname" readonly="readonly" clearable class="c_search" type="text" placeholder="药疗医嘱" />
            <i class="c_searchbtn" @click="selectPop('药疗医嘱')">选择</i>
          </div>
          <div class="fl">
            <span class="c_tip">给药途径</span>
            <el-input v-model="queryInfo.routename" readonly="readonly" clearable class="c_search" type="text" placeholder="给药途径" />
            <i class="c_searchbtn" @click="selectPop('给药途径')">选择</i>
          </div>
        </div>
        <div class="sbtn_box">
          <el-button type="primary" class="btn_clear" @click="getGuardianshipList">查询</el-button>
          <el-button type="danger" class="btn_clear" @click="clearFun">重置</el-button></div>
        <div v-if="!sbtnFlag" class="show_btn" @click="showMore">
          <i class="el-icon-caret-bottom" />
          <span>显示更多</span>
        </div>
        <div v-if="sbtnFlag" class="show_btn" @click="showHide">
          <i class="el-icon-caret-top" />
          <span>收起</span>
        </div>

      </div>
    </div>
    <div class="list_tip clear" />
    <div class="wrapper">
      <div class="title">
        <div class="title-base">基本信息</div>
        <div class="title-attention">关注度/待出院</div>
        <div class="title-tips">3天内风险提示</div>
        <div class="title-dynamic">3天内药疗医嘱动态</div>
        <div class="tittle-todo">待办事项</div>
      </div>
      <div class="content">
        <template v-for="(item,index) in guardianshipList.guardianshipListJson">
          <a :key="item.patient_id" @click="toPatientDetail(item)">
            <el-card shadow="hover" class="cardInfo">
              <div class="title-base">
                <div class="patient-info">
                  <div class="info-top">
                    <div class="patient-bedno">{{ item.bedno }}床</div>
                    <div class="patient-name">{{ item.patient_name }}</div>
                    <div class="patient-age">{{ item.age }}岁</div>
                    <div class="patient-sex">{{ item.sex }}</div>
                  </div>
                  <div class="info-content">
                    <div class="content-title">入院诊断:</div>
                    <div class="content-value">{{ item.disname }}</div>
                  </div>
                  <div class="info-content">
                    <div class="content-title">入院时间:</div>
                    <div class="content-time-value">{{ item.startdate }}</div>
                    <div class="content-time">({{ item.inpdays }}天)</div>
                  </div>
                  <div class="info-content">
                    <div class="content-title">过敏史:</div>
                    <div class="content-value">无</div>
                  </div>
                </div>
              </div>
              <div class="title-attention">
                <div class="attention-info">{{ item.attentionlev }}</div>
              </div>
              <div class="title-tips">
                <div class="info-content">
                  <div class="content-title" />
                  <div class="content-value">{{ item.patientrisk }}</div>
                </div>
              </div>
              <div class="title-dynamic" />
              <div class="tittle-todo" />
            </el-card>
          </a>
        </template>
      </div>
    </div>
    <div class="list_tip clear" />
    <pagination
      :total="guardianshipList.total"
      :page.sync="guardianshipList.pagenum"
      :limit.sync="guardianshipList.pagesize"
      @pagination="getGuardianshipList"
    />
    <Poptable
      ref="ptable"
      :p-type="pType"
      ctype="zy"
      @handleDeptcode="handleDeptcode"
      @handleDoctorcode="handleDoctorcode"
      @handleUniquecode="handleUniquecode"
      @handleRoutecode="handleRoutecode"
    />
  </div>
</template>

<script>
import Poptable from '../components/poptable'
import { gslGetGuardianshipListJson } from '@/api/cpw'
export default {
  name: 'GuardianshipList',
  components: { Poptable },
  data() {
    return {
      queryInfo: {
        patientStatus: '',
        Bedno: '',
        Patient_name: '',
        Doctorcode: '',
        doctorname: '',
        Deptcode: '',
        deptname: '',
        Uniquecode: '',
        drugname: '',
        Routecode: '',
        routename: '',
        PatientType: ''
      },
      guardianshipList: {
        guardianshipListJson: [],
        pagesize: 10,
        pagenum: 1,
        total: 0
      },
      // 病人状态，暂时写死为
      patientStatus: [
        {
          key: '1',
          value: '在院病人'
        }
      ],
      pType: '11',
      sbtnFlag: false,
      style: 'height: 60px;padding-top: 10px;',
      // 科室列表
      deptList: [],
      // 病人类型列表
      PatientTypeList: [
        {
          key: '0',
          value: '全部病人'
        }, {
          key: '1',
          value: '待出院'
        }, {
          key: '2',
          value: '3天内有风险提示'
        }, {
          key: '3',
          value: '3天内有重点药物医嘱动态'
        }, {
          key: '4',
          value: '关注度★★★'
        }, {
          key: '5',
          value: '关注度★★'
        }, {
          key: '6',
          value: '关注度★'
        }, {
          key: '7',
          value: '手术病人'
        }, {
          key: '8',
          value: '使用抗菌药物'
        }
      ]
    }
  },
  methods: {
    selectPop(val) {
      this.$refs.ptable.show()
      this.pType = val
    },
    handleDeptcode(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].deptname)
        codes.push(data[i].deptcode)
      }
      this.queryInfo.deptname = names.join(',')
      this.queryInfo.Deptcode = codes.join(',')
    },
    handleDoctorcode(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].doctorcode)
        codes.push(data[i].doctorname)
      }
      this.queryInfo.Doctorcode = names.join(',')
      this.queryInfo.doctorname = codes.join(',')
    },
    handleUniquecode(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].uniquecode)
        codes.push(data[i].drugname)
      }
      this.queryInfo.Uniquecode = names.join(',')
      this.queryInfo.drugname = codes.join(',')
    },
    handleRoutecode(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].routecode)
        codes.push(data[i].routename)
      }
      this.queryInfo.Routecode = names.join(',')
      this.queryInfo.routename = codes.join(',')
    },
    showMore() {
      this.sbtnFlag = true
      this.style = ''
    },
    showHide() {
      this.sbtnFlag = false
      this.style = 'height: 60px;padding-top: 10px;'
    },
    clearFun() {
      this.queryInfo = {
        patientStatus: '',
        Bedno: '',
        Patient_name: '',
        Doctorcode: '',
        doctorname: '',
        Deptcode: '',
        deptname: '',
        Uniquecode: '',
        drugname: '',
        Routecode: '',
        routename: '',
        PatientType: ''
      }
      this.$refs.ptable.clearSelect()
    },
    // 获取监护列表
    async getGuardianshipList() {
      var tempObj = JSON.parse(JSON.stringify(this.queryInfo))
      for (var key in tempObj) {
        if (tempObj[key] === '') {
          delete tempObj[key]
        }
      }
      delete tempObj.patientStatus
      delete tempObj.Patient_name
      delete tempObj.doctorname
      delete tempObj.deptname
      delete tempObj.drugname
      delete tempObj.routename
      await gslGetGuardianshipListJson({
        json: tempObj,
        pagenum: this.guardianshipList.pagenum,
        pagesize: this.guardianshipList.pagesize
      }).then(res => {
        this.guardianshipList.guardianshipListJson = res.rows
        this.guardianshipList.total = res.records
      })
    },
    toPatientDetail(item) {
      this.$router.push({ path: '/cpw/guardianshiplist/patientdetail', query: { patientDetail: item }})
    }
  }
}
</script>

<style lang="scss" scoped="scoped">

  body{
    background:#e6edf5;
  }
  .wrapper{
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    .title{
      display: flex;
      background-color: #29a4f2;
      color: #FFFFFF;
      border-radius: 5px;
      height: 36px;
      line-height: 36px;
      text-align: center;
    }
    .title-base{
      width: 20%;
      min-width: 250px;
    }
    .title-attention,.title-tips{
      width: 15%;
      min-width: 190px;
      text-align: center;
    }
    .title-dynamic,.tittle-todo{
      width: 25%;
      min-width: 320px;
    }
    .content{
      font-size: 12px;
      .cardInfo{
        margin-top: 5px;
        display: flex;
        background-color: #FFFFFF;
        border-radius: 5px;
        height: 118px;
        .title-base{
          display: flex;
          align-items: center;
          .patient-info{
            display: flex;
            flex-direction: column;
            margin: 0 5px;
            .info-top{
              display: flex;
              font-size: 16px;
              .patient-bedno{
                width: 60px;
                text-align: center;
                border-left: 2px solid #29a4f2;
              }
              .patient-name{
                color: #29a4f2;
                font-weight: bold;
                width: 100px;
                margin-left: 10px;
              }
              .patient-age,.patient-sex{
                margin-left: 5px;
                width: 40px;
                text-align: center;
              }
            }
            .info-content{
              display: flex;
              margin-top: 5px;
              margin-left: 10px;
              .content-title{
                width: 60px;
              }
              .content-value{
                width: 180px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow:ellipsis;
              }
              .content-time-value{
                width: 140px;
              }
            }
          }
        }
        .title-attention{
          display: flex;
          justify-content: center;
          align-items: center;
          align-content: center;
          font-size: 16px;
          color: #E6A23C;
        }
        .title-tips{
          .info-content{
            display: flex;
            margin-top: 5px;
            .content-title{
              width: 60px;
            }
            .content-value{
              width: 150px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow:ellipsis;
            }
          }
        }
      }
    }
  }
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      line-height:40px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
        line-height:65px;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        padding:15px 0;
        position:relative;
        .show_btn{
          position:absolute;
          right:20px;
          bottom:15px;
          border:1px solid #e1e1e1;
          background:#f9fafc;
          border-radius:2px;
          text-align:center;
          line-height:32px;
          width:104px;
          height:32px;
          font-size:14px;
          color:#9f9f9f;
          cursor: pointer;
        }
        .fl{
          margin-bottom:10px;
        }
        .c_tip{
          display:inline-block;
          width:80px;
          padding-right:10px;
          text-align:right;
        }
        .c_input{
          width:131px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:90px;
        }
        .c_searchbtn{
          display:inline-block;
          width:34px;
          height:25px;
          margin-left:3px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:230px;
          height:40px;
          display:inline-block;
          margin-left:-12px;
        }
        .btn_clear{
          padding:0;
          width:60px;
          height:40px;
          line-height:40px;
        }
        .sbtn_box{
          text-align:left;
          padding-left:82px;
        }
        .c_select{
          width:130px;
        }
        @media screen and (min-width:1466px){
          .c_select{
            width:150px;
          }
          .btn_clear{
            padding:0;
            width:70px;
            height:40px;
            line-height:40px;
          }
          .c_input{
            width:150px;
          }
          .c_search{
            width:100px;
          }
          .c_searchbtn{
            width:42px;
            margin-left:4px;
          }
          .c_tip{
            width:100px;
          }
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding:10px 18px;
    }
    .table_box{
      padding:0 18px;
    }
  }
  .el-checkbox__label{
    padding-left:5px;
  }
  .el-checkbox{
    margin-right:10px;
  }
  /deep/.el-input{
    width:150px;
    height:40px;
    border-radius:4px;
    padding-left:5px;
    font-size: 12px;
  }
  /deep/ .el-card__body{
    padding: 0;
    margin-top: 5px;
    display: flex;
    background-color: #FFFFFF;
    border-radius: 5px;
    height: 100px;
  }

</style>
